import React from 'react';
import { View } from 'react-native';
import { Lt, Color, NavTheme as Nav, Label, Button, Jpp, Jx, Navigator, Dialog, Fimage, Flist, Touch } from "../_utils";
import { Net } from "../_net"
import { eRole, LabelHead } from './_me';
import { SegProjector, ViewLine } from '../_util';

class ListTeam extends React.PureComponent{
    render(){
        const {style, uri, title, content, children, ...other} = this.props;
        return <Touch {...other}>
            <View style={{paddingHorizontal:Lt.pad, flexDirection:"row", justifyContent:"space-between", alignItems:"center", ...style}}>
                <View style={{flexDirection:"row", paddingVertical:5}}>
                    <Fimage uri={uri} style={{width:60, height:60, borderRadius:30}}/>
                    <View style={{paddingLeft:5, justifyContent:"center"}}>
                        <Label style={{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
                        <Label style={{color:Color.c9, marginTop:5}}>{content}</Label>
                    </View>
                </View>
                <View>{children}</View>
            </View>
        </Touch>
    }
}
const c_fields = ["直推会员","会员下级"]
// 我的团队
export class Team extends React.PureComponent{
    constructor(props){
        super(props);
        const {data} = this.props.navigation.state.params;
        this.state = {
            data,
        }
        this.flistRef = null;
        this.onLoadAgent = this.onLoadAgent.bind(this);
        this.onItemAgent = this.onItemAgent.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle:"我的团队",
    }
    onLoadCarrier(idx, params){
        Net.request((idx === 0) ? "team/myTeam" : "team/myFans", params.pagination, {params}).then(r=>{
            if(r.data){
                params.add((idx === 0) ? r.data.pageData : r.data.data)
            }else{
                params.add();
            }
        });
    }
    onItemCarrier(idx, params){
        const item = params.item;
        if(idx == 1){
            return <ListTeam 
                uri={item.image}
                title={item.username}
                content={"推荐人: "+item.pidname}
            />;
        }
        return <ListTeam 
        uri={item.image}
        title={item.username}
        onPress={this.onItemClick.bind(this,item)}
        content={"推荐了"+item.chidSum+"位会员"}
        >
        {
            (item.roleId === eRole.FANS) ? 
            <Button.Pure title={"升级代理"} onPress={this.onCarrierClick.bind(this,item)}/> :
            <Button.Pure title={"我的代理"} style={{backgroundColor:"#E9E9E9", color:Color.c6}}/>
        }
        </ListTeam>
    }
    onItemClick(item){
        Navigator.push("TeamDetail", {data:item})
    }
    onCarrierClick(item){
        Navigator.push("Promote", {data:item, onPop:()=>{
            this.flistRef && this.flistRef.refresh();
        }})
    }
    onLoadAgent(params){
        return this.onLoadCarrier(0, params);
    }
    onItemAgent(params){
        const item = params.item;
        return <ListTeam
            uri={item.image}
            title={item.username}
            onPress={this.onItemClick.bind(this, item)}
            content={Jx.toDate(item.joinTime, "", false)}
        />
    }
    render(){
        const { data } = this.state;
        const isC = (data.roleId == eRole.CARRIER);
        return <View style = {{flex:1, backgroundColor:"white"}}>
            <Nav.StatusBar/>
            <View style = {{paddingVertical:Lt.pad, backgroundColor:Color.theme,flexDirection:"row", justifyContent:"space-around"}}>
                <LabelHead title={"团队总人数"}>{data.myTeamCount}</LabelHead>
                {
                    (!isC) ? null :
                    <LabelHead title={"代理人数"}>{data.myAgentCount}</LabelHead>
                }
                <LabelHead title={"团队贡献"}>{data.myTeamMoney}</LabelHead>
            </View>
            {
                isC ? <SegProjector fields={c_fields} titleFontSize={Lt.c16}>
                    <Flist ref={r=>this.flistRef=r}
                        style={{flex:1}}
                        onLoad = {params=>this.onLoadCarrier(0, params)}
                        onItem = {params=>this.onItemCarrier(0, params)}
                        ItemSeparatorComponent = {ViewLine}
                    />
                    <Flist
                        style={{flex:1}}
                        onLoad = {params=>this.onLoadCarrier(1, params)}
                        onItem = {params=>this.onItemCarrier(1, params)}
                        ItemSeparatorComponent = {ViewLine}
                    />
                </SegProjector> : 
                <Flist
                    style={{flex:1}}
                    onLoad = {this.onLoadAgent}
                    onItem = {this.onItemAgent}
                    ItemSeparatorComponent = {ViewLine}
                    ListHeaderComponent = {<View>
                        <Label style={{alignSelf:"center",marginVertical:Lt.margin, fontSize:Lt.c18, color:Color.c3}}>{c_fields[0]}</Label>
                        <ViewLine/>
                    </View>}
                    stickyHeaderIndices={[0]}
                />
            }
        </View>;
    }
}